import React from 'react';

import twitterLogo from '../twitter.svg';
import './Login.css';

export default class Login extends React.Component {
    state = {
        userName: '',
    };

    handleInputChange = e => {
        this.setState({
            userName: e.target.value,
        });
    }

    handleSubmit = e => {
        e.preventDefault();

        const { userName } = this.state;

        if(!userName.length) return;

        localStorage.setItem('@GonaniTwitter:userName',userName);

        this.props.history.push('/timeline');
    }

    render() {
        return (
            <div className="login-wrapper">
                <img src={ twitterLogo } alt="naniTwitter" />
                <form onSubmit={this.handleSubmit}>
                    <input
                        placeholder="Nome de usuário" 
                        value={ this.state.userName }
                        onChange={this.handleInputChange}
                        />
                    <button type="submit">Entrar</button>
                </form>
            </div>
        )
    }
}